<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :width="668"
    :title="title"
    :max-height="1000"
    @ok="handleConfirm"
  >
    <BasicForm @register="registerForm">
      <template #info="{ model, field }">
        <div class="checkbox-cont">
          <CheckboxGroup v-model:value="model[field]">
            <Checkbox
              v-for="(item, index) in options"
              :key="index"
              class="checkbox-item"
              :value="item.value"
              >{{ item.label }}</Checkbox
            >
          </CheckboxGroup>
        </div>
      </template>
    </BasicForm>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { useModalInner, BasicModal } from '/@/components/Modal';
  import { useForm, BasicForm } from '/@/components/Form';
  import { addFormSchema } from '../setting-room';
  import { CheckboxGroup, Checkbox } from 'ant-design-vue';
  import { editMeetingRoom } from '/@/api/admin/meeting';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  const $emits = defineEmits(['success', 'register']);

  const options = ref<any[]>([]);

  const [registerForm, { validate, setFieldsValue }] = useForm({
    schemas: addFormSchema,
    showActionButtonGroup: false,
    baseColProps: {
      span: 24,
    },
    labelWidth: 100,
  });
  const isUpdate = ref(false);
  let id: any = null;

  const title = computed(() => (isUpdate.value ? '编辑会议室' : '新增会议室'));

  const [registerModal] = useModalInner((data) => {
    console.log(data);

    isUpdate.value = data.isUpdate;
    options.value = data?.options ?? [];

    if (isUpdate.value) {
      id = data.id;
      setFieldsValue({ ...data, deviceids: data.deviceids ? data.deviceids.split(',') : [] });
    }
  });

  // 提交创建
  const handleConfirm = async () => {
    const values = await validate();
    console.log('%cvalues--------', 'color:#f45;font-size:30px;font-weight:bold', values);

    if (values.deviceids) {
      values.deviceids = values.deviceids.toString();
    }
    if (isUpdate.value) {
      values.id = id;
    }

    await editMeetingRoom(values);
    createMessage.success(isUpdate.value ? '更新成功' : '创建成功');
    $emits('success');
  };
</script>

<style lang="less" scoped>
  .checkbox-cont {
    padding: 24px;
    background: #f8f8f8;

    .checkbox-item {
      margin-right: 40px;
      margin-bottom: 24px;
    }
  }
</style>
